<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="checkbox" v-model="allcheck" @change="onAllcheckChange()"><br>
    <ul>
      <li v-for="data in datalist">
        <input type="checkbox" v-model="checklist" :value="data" @change="onItemCheckChange()">
        {{data}}
        <button @click=increase(data,-1)>-</button>
        {{data.number}}
        <button @click=increase(data,1)>+</button>
      </li>
    </ul>
    {{checklist}}
    <br>
    总价格：{{ getTotalPrice() }}元
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        allcheck: false,
        checklist: [],
        datalist: [
          {
            name: "商品1",
            price: 10,
            number: 1,
            id: "1",
          },
          {
            name: "商品2",
            price: 20,
            number: 2,
            id: "2",
          },
          {
            name: "商品3",
            price: 30,
            number: 3,
            id: "3",
          }
        ]
      },
      methods: {
        onAllcheckChange() {
          this.checklist = this.allcheck ? this.datalist : []
        },
        onItemCheckChange() {
          this.allcheck = (this.checklist.length === this.datalist.length) ? true : false
        },
        increase(data, n) {
          data.number = data.number + n < 0 ? 0 : data.number + n
        },
        getTotalPrice() {
          if (this.checklist.length) {
            
            return this.checklist.reduce(
              (pv, cv, index) => {
                console.log(pv, cv, index);
                if(typeof(pv)!=="number"){
                  pv = pv.price * pv.number
                }
                return pv + cv.price * cv.number
              }
            )

          }else{
            return 0
          }

        }
      }

    })
  </script>
</body>

</html>